<template>
  <!--<canvas id="drawing" width="800" height="500" style="background: #FFD;">A drawing of something</canvas>-->
  <div style="height: 500px; width: 800px; margin: 0 auto;" id="canvas"></div>
</template>

<script>
  export default {
    data () {
      return {

      }
    },
    mounted () {
      // this.DrawGrid()
      this.QuneeGrid()
    },
    methods: {
      DrawGrid () {
        let CANVAS_WIDTH = 800;
        let CANVAS_HEIGHT = 500;
        let GRID_WIDTH = 25;
        let GRID_HEIGHT = 25;

        drawGrid(CANVAS_WIDTH, CANVAS_HEIGHT, GRID_WIDTH, GRID_HEIGHT);

        //绘制网格
        function drawGrid(CANVAS_WIDTH, CANVAS_HEIGHT, GRID_WIDTH, GRID_HEIGHT) {
          let rows = parseInt(CANVAS_WIDTH / GRID_WIDTH);
          let cols = parseInt(CANVAS_HEIGHT / GRID_HEIGHT);
          for (let i = 0; i < rows; ++i) {
            for (let j = 0; j < cols; ++j) {
              drawRect(i, j, GRID_WIDTH, GRID_HEIGHT);
              if (i === 0 || j === 0) {
                drawText(i, j, GRID_WIDTH, GRID_HEIGHT); //增加坐标
              }
            }
          }
        }

        //绘制横坐标与纵坐标
        function drawText(i, j, GRID_WIDTH, GRID_HEIGHT) {
          let drawing = document.getElementById("drawing");
          if (!drawing.getContext) return false;
          let context = drawing.getContext("2d");
          context.font = "14px Arial ";
          context.textAlign = "start";
          let x_axis = i * 100 + "";
          let y_axis = j * 100 + "";
          context.fillText(x_axis, i * 100, 15);   //绘制横坐标
          context.fillText(y_axis, 0, j * 100);    //绘制纵坐标
        }

        //绘制矩形
        function drawRect(i, j, GRID_WIDTH, GRID_HEIGHT) {
          let drawing = document.getElementById("drawing");
          if (!drawing.getContext) return false;
          let context = drawing.getContext("2d");
          context.lineWidth = 0.5;
          context.strokeStyle = "lightgrey";
          context.strokeRect(i * GRID_WIDTH, j * GRID_HEIGHT, GRID_WIDTH, GRID_HEIGHT);
        }
      },
      QuneeGrid () {
        function GridBackground(graph) {
          this.graph = graph;
          graph.onPropertyChange('viewport', this.update.bind(this));
          graph.onPropertyChange('transform', this.update.bind(this));

          this.canvas = Q.createCanvas(graph.width, graph.height, true);
          this.canvas.style.backgroundColor = '#FFD';
          this.canvas.style.position = 'absolute';
          this.canvas.style.top = '0px';
          this.canvas.style['-webkit-user-select'] = 'none';
          this.canvas.style['-webkit-tap-highlight-color'] = 'rgba(0, 0, 0, 0)';

          this.scaleCanvas = Q.createCanvas(graph.width, graph.height, true);
          this.scaleCanvas.style.position = 'absolute';
          this.scaleCanvas.style.top = '0px';
          this.scaleCanvas.style['-webkit-user-select'] = 'none';
          this.scaleCanvas.style['-webkit-tap-highlight-color'] = 'rgba(0, 0, 0, 0)';

          graph.canvasPanel.insertBefore(this.canvas, graph.canvasPanel.firstChild);
          graph.canvasPanel.appendChild(this.scaleCanvas);

          this.update();
        }

        GridBackground.prototype = {
          update: function () {
            let graph = this.graph;
            let canvas = this.canvas;
            let scaleCanvas = this.scaleCanvas;
            graph.callLater(function () {
              canvas.setSize(graph.width, graph.height);
              //canvas.width = canvas.width;//clear canvas  todo: ？？？
              scaleCanvas.setSize(graph.width, graph.height);
              scaleCanvas.width = canvas.width;//clear canvas

              let scale = graph.scale;
              let gap = 50 / scale;
              let currentCell = this.currentCell = 10 * (Math.round(gap / 10) || 1);

              scale = graph.scale * canvas.ratio;
              let bounds = graph.viewportBounds;
              let g = canvas.g;

              g.save();
              this._doTransform(g, scale, bounds);

              g.beginPath();
              let x = bounds.x, y = bounds.y, right = bounds.right, bottom = bounds.bottom;
              if (x % currentCell !== 0) {
                x -= (x % currentCell);
              }
              if (y % currentCell !== 0) {
                y -= (y % currentCell);
              }
              while (x < right) {
                g.moveTo(x, bounds.y);
                g.lineTo(x, bottom);
                x += currentCell;
              }
              while (y < bottom) {
                g.moveTo(bounds.x, y);
                g.lineTo(right, y);
                y += currentCell;
              }

              g.lineWidth = 1 / scale;
              g.strokeStyle = '#CCC';
              g.stroke();

              scaleCanvas.g.save();
              this._doTransform(scaleCanvas.g, scale, bounds);
              this.drawScales(scaleCanvas.g, bounds, scale, scaleCanvas.ratio);
              scaleCanvas.g.restore();

              g.restore();
            }, this);
          },
          _doTransform: function(g, scale, bounds){
            g.translate(-scale * bounds.x, -scale * bounds.y);
            g.scale(scale, scale);
          },
          drawText: function (g, text, x, y, fontSize, textAlign, textBaseline, rotate) {
            fontSize = fontSize || 7;
            g.save();
            let fontScale = 3;
            fontSize *= fontScale;
            g.font = 'normal ' + fontSize + 'px helvetica arial';
            g.fillStyle = '#555';
            g.textAlign = textAlign || 'center';
            g.textBaseline = textBaseline || 'top';
            g.translate(x, y);
            if (rotate) {
              g.rotate(rotate);
            }
            g.scale(1 / fontScale, 1 / fontScale);
            g.fillText(text, 0, 0);
            g.restore();
          },
          drawScales: function (g, bounds, scale, ratio) {
            g.beginPath();

            let scaleLength = 5 * ratio / scale;

            g.moveTo(bounds.x, bounds.y);
            g.lineTo(bounds.right, bounds.y);
            g.moveTo(bounds.x, bounds.y);
            g.lineTo(bounds.x, bounds.bottom);

            g.lineWidth = 5 / scale;
            g.strokeStyle = '#2898E0';
            g.stroke();

            let fontSize = 12 * ratio / scale;

            g.beginPath();
            let x = bounds.x;
            x = this.currentCell * Math.ceil(x / this.currentCell);
            while (x < bounds.right) {
              g.moveTo(x, bounds.y);
              g.lineTo(x, bounds.y + scaleLength + scaleLength);
              this.drawText(g, '' + x | 0, x, bounds.y + scaleLength + scaleLength, fontSize);
              x += this.currentCell;
            }
            let y = bounds.y;
            y = this.currentCell * Math.ceil(y / this.currentCell);
            while (y < bounds.bottom) {
              g.moveTo(bounds.x, y);
              g.lineTo(bounds.x + scaleLength + scaleLength, y);
              this.drawText(g, '' + y | 0, bounds.x + scaleLength + scaleLength, y, fontSize, 'center', 'top', -Math.PI / 6);
              y += this.currentCell;
            }
            g.lineWidth = 1 / scale;
            g.strokeStyle = '#000';
            g.stroke();
          }
        };

        let graph = new Q.Graph(canvas);
        graph.enableWheelZoom = false;

        new GridBackground(graph);

        graph.moveToCenter();

      }
    }
  }
</script>
